<template>
    <div v-dialog-drag>
      <el-dialog
        :title="id === 0 ? '新增' : '编辑'"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal="false"
        :close-on-press-escape="true"
        :show-close="false"
        @close="close"
      >
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
          <el-col :span="24">
            <el-form-item label="报警名称" prop="name" label-width="100px">
              <el-input v-model="ruleForm.name" size="mini" clearable placeholder="请输入报警名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="报警描述" prop="describe"  label-width="100px">
              <el-input
                type="textarea"
                v-model="ruleForm.describe"
                :autosize="{ minRows: 4, maxRows: 5}"
                style="width: 100%" size="mini"
                clearable
                placeholder="请输入报警名称" />
            </el-form-item>
          </el-col>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="close"
          >取消</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="save"
          >确认</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  import { updateWarningLevel, createWarningLevel, detailWarningLevel } from '@/api/warning'
  export default {
    name: "detail",
    props: {
      id: {
        type: Number,
        default: 0
      },
    },
    data() {
      return {
        dialogVisible: false,
        ruleForm: {
          name: '',
          describe: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入报警等级名称', trigger: 'blur'}
          ],
          describe: [
            {required: true, message: '请输入报警等级名称', trigger: 'blur'}
          ]
        }
      }
    },
    watch: {
      id(newV, oldV){
        if (newV === 0) {
          this.resetForm()
        } else {
          this.getDetail()
        }
      }
    },
    methods: {
      /**
       * @description: 获取详情数据
       * @author: 书童
       */
      getDetail() {
        detailWarningLevel({id: this.id}).then(res => {
          // console.log('详情数据', res)
          this.ruleForm = res.data
        })
      },
      /**
       * @description: 新增/编辑
       * @author: 书童
       */
      save() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            // 先判断是新增还是编辑
            let promise = new Promise((resolve,reject) => {
              if (this.id === 0) {
                createWarningLevel(this.ruleForm).then(res => {
                  resolve()
                })
              } else {
                updateWarningLevel(this.ruleForm).then(res => {
                  resolve()
                })
              }
            })
            promise.then(() => {

              // 刷新表格数据,关闭表格
              this.$emit('reload')
              this.close()
            }).then(() => {
              console.log(111111)
              this.$message({
                type: 'success',
                message: this.id === 0 ? '新增成功' : '编辑成功'
              })
            })
          }
        })
      },
      open() {
        this.dialogVisible = true
      },
      close() {
        this.resetForm()
        this.dialogVisible = false
      },
      resetForm() {
        this.ruleForm = {
          name: '',
          describe: ''
        }
      }
    }
  }
</script>

<style scoped>

</style>
